<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/jquery-3.4.1.js"></script>
    <script src="lib/http.js"></script>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div class="loading"><img src="images/tenor.gif" alt=""></div>
    <div class="main-box">
        <div class="container">
            <div class="container-top-box">
                <p>推荐节目<span>(每日更新)</span></p>
                <div class="musics-box">
                    <!-- <div class="music-box">
                        <div class="img-box">
                            <img src="" alt="">
                        </div>
                        <div class="name-box">
                            <a href=""></a>
                        </div>
                        <div class="brand-box">
                            <a href=""></a>
                        </div>
                        <div class="listen-box"></div>
                        <div class="like-box"></div>
                        <span class="type-box"></span>

                    </div> -->
                </div>
            </div>
        </div>
    </div>
    </div>
    <script>
        var url = "https://music.aityp.com/program/recommend?limit=30";
        var music = [];

        http({
            url,
            callback: getMusic
        });

        function getMusic(res) {
            console.log(res.programs);
          
            for (let i=0;i<res.programs.length;i++) {
                var content = Object();
                content.picUrl = res.programs[i].radio.picUrl
                content.name = res.programs[i].mainSong.name
                content.brand = res.programs[i].dj.brand
                content.listenner = '播放' + res.programs[1].listenerCount
                content.like = res.programs[i].likedCount
                content.type = res.programs[i].radio.category
                music.push(content);
                
            }
           for(let j=0;j<music.length;j++){
               var item;
               item=$(`
               <div class="music-box">
                        <div class="img-box">
                            <img src="${music[j].picUrl}" alt="">
                        </div>
                        <div class="name-box">
                            <a href="">${music[j].name}</a>
                        </div>
                        <div class="brand-box">
                            <a href="">${music[j].brand}</a>
                        </div>
                        <div class="listen-box">${music[j].listenner}</div>
                        <div class="like-box">${music[j].like}</div>
                        <span class="type-box">${music[j].type}</span>

                    </div>
               `);
               $('.musics-box').append(item);
           }
        }
    </script>
</body>

</html>